<template>
    <view class="xilu">
        <view class="page-foot bg-white" @click="formSubmit()">
            <view class="btn1">确定提交</view>
        </view>
        <view class="container">
            <view class="xilu_box flex-box" v-for="(product,index) in orderProduct" :key="index">
                <image :src="product.image" mode="aspectFill" class="xilu_pic"></image>
                <view class="flex-grow-1 pl30">
                    <view class="m-ellipsis-l2 fs30 col10 fwb">{{product.product_name}}</view>
                    <view class="red fs40 fwb pt60"><text class="fs24">¥</text>{{product.product_price}}</view>
                </view>
            </view>
            <view class="xilu_box">
                <view class="fs30 col6">星级评价</view>
                <view class="flex-box flex-center pt40 pb50">
                    <u-rate :count="count" v-model="comment.star" size="58" activeColor="#FFC100" inactiveColor="#EEEEEE" gutter="15" inactiveIcon="star-fill"></u-rate>
                </view>
                <view class="fs30 col6 pb40">评价说明</view>
                <textarea class="xilu_textarea fs30" v-model="comment.content" cols="30" rows="10" placeholder="请描述～"></textarea>
                <view class="fs30 col6 pt50 pb40">上传图片</view>
                <u-upload :fileList="fileListimages" @afterRead="afterRead" @delete="deletePic" name="images" multiple="true" :maxCount="9" width="200" height="200" :previewFullImage="true"></u-upload>
            </view>
        </view>
    </view>
</template>

<script>
	var validate = require("../../xilu/validate.js");
    export default {
        data() {
            return {
                count: 5,
                fileListimages: [],
				orderProduct:[],
				comment:{
					product_id: 0,
					order_id:0,
					star: 1,
					content:''
				}
            };
        },
		onLoad() {
			let page = this;
			this.getOpenerEventChannel().on('commentTransfor',function(orderProduct){
				if(orderProduct.length<=0){
					uni.showModal({
						title:'提示',
						content:'评价商品不存在',
						showCancel:false,
						success() {
							if(res.confirm){
								uni.navigateBack();
							}
						}
					});
					return ;
				}
				page.orderProduct = orderProduct;
				page.comment.order_id = orderProduct[0].order_id;
				page.comment.product_id = orderProduct[0].product_id;
			})
		},
        methods: {
            // 删除图片
            deletePic(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
            },
            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
            },
            uploadFilePromise(filepath) {
                let page = this;
                return new Promise((resolve, reject) => {
                    page.$core.uploadFile({
                        filePath: filepath,
                        success: (ret, response) => {
                            resolve(ret.data.url)
                        }
                    })
                })
            },
			//提交
			formSubmit() {
			    let formData = this.comment;
				console.log(formData);
				let images = []
				this.fileListimages.forEach(item=>images.push(item.url));
				formData.images = images.join(',');
			    var rule = [
					{name: 'order_id',nameChn: '订单ID',rules: ['require','gt:0'],errorMsg: {require: '评价订单错误',gt: '评价订单错误'},},
					{name: 'product_id',nameChn: '商品id',rules: ['require','gt:0'],errorMsg: {require: '商品错误',gt: "商品错误"},},
					{name: 'star',nameChn: '评分',rules: ['require','gt:0'],errorMsg: {require: '请对商品评分',gt: "商品评分最低一星"},},
					{name: 'content',nameChn: '评价',rules: ['require','length:1,600'],errorMsg: {require: '请填写商品评价',length: "评价限制600字"},},
					];
			    // 是否全部通过，返回Boolean
				//console.log(validate.check(formData,rule),validate.getError(),formData);
			
				if(!validate.check(formData,rule)){
					uni.showToast({title: validate.getError()[0],icon:'none'});
					return ;
				}
				this.$core.post({url:'xilumarket.comment/add_comment',data:formData,success:ret=>{
					this.getOpenerEventChannel().emit('commentSuccess',ret.data);
					uni.navigateBack({});
					uni.showToast({title: '评价成功',icon:'none'});
				}})
			}
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            background: #F7F9FC;
        }

        &_box {
            width: 690rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 4rpx 20rpx 5rpx rgba(183, 189, 202, 0.05);
            border-radius: 20rpx;
            margin: 30rpx;
            padding: 30rpx;
        }

        &_pic {
            width: 180rpx;
            height: 180rpx;
        }

        .pt60 {
            padding-top: 60rpx;
        }

        &_textarea {
            width: 630rpx;
            height: 260rpx;
            background: #F7F9FC;
            border-radius: 15rpx;
            padding: 30rpx;
        }
    }
</style>